<template>
  <van-sticky>
    <van-search
      v-model="searchValue"
      shape="round"
      placeholder="搜索基地名称"
      input-align="center"
      @search="onSearch"
    >
      <template #left>
        <svg class="icon mr4 ft32" aria-hidden="true" @click="$goPage(-1)">
          <use xlink:href="#icon-back"></use>
        </svg>
      </template>
    </van-search>
    <div class="u-f u-f-ac u-f-jsb backgroundWhite pl8 pr8">
      <van-tabs
        class="flex1"
        v-model:active="active"
        title-inactive-color="#999999"
        @click-tab="onClickTab"
      >
        <van-tab
          v-for="(item, key, index) in typeList"
          :key="index"
          :title="item"
          :name="key"
        >
        </van-tab>
      </van-tabs>
      <svg class="icon ml4 ft32" aria-hidden="true" @click="showPopup = true">
        <use xlink:href="#icon-liebiao"></use>
      </svg>
    </div>
  </van-sticky>

  <div>
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div
        class="cardlist-item u-f mb8"
        v-for="(item, index) in list"
        :key="index"
        @click="$toPage('/baseDetail/' + item.id)"
      >
        <div class="image-box">
          <img v-default-img :src="$oss + item.cover" alt="" />
        </div>
        <div class="flex1 u-f u-f-fdc u-f-jsb ml12 ts">
          <div class="ft32 ellipsis-1 fb">{{ item.name }}</div>
          <div class="ft28 color66">
            {{ item.openDateText }}<br />{{
              `${'上午开馆时间：' + item.open_time_morning}`
            }}<br />{{ `${'下午开馆时间：' + item.open_time_afternoon}` }}
          </div>
          <div class="ft28 ellipsis-1 color525">
            {{ item.address }}
          </div>
        </div>
      </div>
    </van-list>
  </div>
  <!-- <van-popup v-model:show="showPopup" position="right" style="width: 100px"
    ></van-popup
  > -->
</template>

<script setup>
import { ref, getCurrentInstance, onBeforeMount } from 'vue'
import { weekDay } from '@/utils/model'
const list = ref([])
const typeList = ref([])
const page = ref(1)
const limit = 5
const loading = ref(false) //是否加载状态
const finished = ref(false) //是否已加载完成
const searchValue = ref('') //搜索关键字
const active = ref(0) //分类导航选中索引
let typeKey = 0
// const showPopup = ref(false) //是否显示分类列表弹出层
const instance = getCurrentInstance()
const _this = instance.appContext.config.globalProperties
// 获取基地类型列表
let res = await _this.$api.base.GetBaseType()
typeList.value = res.data
typeKey = Object.keys(typeList.value)[0]
const onLoad = () => {
  console.log(typeKey)
  // 异步更新数据
  _this.$api.base
    .GetBaseList({
      page: page.value,
      limit,
      name: searchValue.value,
      type: typeKey
    })
    .then((res) => {
      res.data = res.data.map((item) => {
        item.openDateText = item.open_date
          .map((item) => weekDay[item])
          .join('、')
        return item
      })

      list.value = list.value.concat(res.data)
      page.value++
      // 加载状态结束
      loading.value = false

      // 数据全部加载完成
      if (list.value.length >= res.meta.total) {
        finished.value = true
      }
    })
}
//点击搜索事件
const onSearch = (val) => {
  initEvent()
}
const initEvent = () => {
  // 初始化列表加载状态
  page.value = 1
  list.value = []
  finished.value = false
  loading.value = true
  onLoad()
}
//点击切换标签事件
const onClickTab = (obj) => {
  typeKey = obj.name
  initEvent()
}
</script>

<style scoped lang="scss">
.cardlist-item {
  @include cardListItem;
  border-radius: 0px;
  .image-box {
    width: 3.466667rem;
    height: 2.213333rem;
  }
}
</style>
